<template>
  <div>
    <!-- <codemirror ref="mycode" :value="curCode" :options="cmOptions" class="code"></codemirror> -->
    <div id="view" ref="mycode" @change="fn()"></div>
  </div>
</template>
<script>
import CodeMirror from "codemirror";
// 核心样式
import "codemirror/lib/codemirror.css";
// 引入主题后还需要在 options 中指定主题才会生效
import "codemirror/theme/idea.css";

// 需要引入具体的语法高亮库才会有对应的语法高亮效果
// codemirror 官方其实支持通过 /addon/mode/loadmode.js 和 /mode/meta.js 来实现动态加载对应语法高亮库
// 但 vue 貌似没有无法在实例初始化后再动态加载对应 JS ，所以此处才把对应的 JS 提前引入
import "codemirror/mode/javascript/javascript.js";
import "codemirror/mode/css/css.js";
import "codemirror/mode/xml/xml.js";
import "codemirror/mode/shell/shell.js";
import "codemirror/mode/sql/sql.js";

//代码补全提示
import "codemirror/addon/hint/anyword-hint.js";
import "codemirror/addon/hint/css-hint.js";
import "codemirror/addon/hint/html-hint.js";
import "codemirror/addon/hint/javascript-hint.js";
import "codemirror/addon/hint/show-hint.css";
import "codemirror/addon/hint/show-hint.js";
import "codemirror/addon/hint/sql-hint.js";
import "codemirror/addon/hint/xml-hint.js";

//代码版本差异比较
import "codemirror/addon/merge/merge.js";
import "codemirror/addon/merge/merge.css";
import DiffMatchPatch from "diff-match-patch";
window.diff_match_patch = DiffMatchPatch;
window.DIFF_DELETE = -1;
window.DIFF_INSERT = 1;
window.DIFF_EQUAL = 0;
export default {
  name: "test",
  //   components: {
  //     codemirror
  //   },
  data() {
    return {
      //   curCode: "",
      //   cmOptions: {
      //     value: "",
      //     mode: "javascript",
      //     theme: "ambiance",
      //     readOnly: false,
      //     lineNumbers: true,
      //     smartIndent: true,
      //     Autofocus:true,
      //     extraKeys: {'Ctrl-Q': 'autocomplete'},
      //   }
    };
  },
  mounted() {
    //const target = document.getElementById("view");
    // const dmp = new DiffMatchPatch();
    CodeMirror.MergeView(this.$refs.mycode, {
      value:
        "Leftssss\nsssdfd\nsdf\nsdf\nsdsdss\naaasdf\nsdfsd\nbbb\nnaaddddddddddddddddddddddddddddddddddddddd\nadssa\nasdas\nasdf\nssss\ndddd\nffff\nccc\naaa\nzzzz\nsss\nbbb\nfff\nvvv\n\ndfddd\nsss\nzzz\noooo\nppp\nyyy\ncccc\nssss\nhhhh\nssss",
      origLeft: null,
      orig:
        "Rightssss\nsssdfd\nsdf\nsdf\nsdsdss\naas\nsdfsd\nbbb\naaa\nadssa\nasdddddddddddddddddddddddddddddddddddddddddddas\nasdf\nsdd\ndffd\nffdg\nccc\naaa\nzzzz\nsss\nbbb\nfff\nvvv\n\ndfddd\nsss\nzs\noodf\nppfdgp\nyyyndfgcc\nssdfgdss\nhhssssh\nsdfgdfg",
      lineNumbers: true,
      mode: "text/html",
      highlightDifferences: true,
      connect: null,
      rtlMoveVisually:false,
      collapseIdentical: false
    });
  },
  methods:{
      fn(){
          alert(1)
      }
  }
};
</script>
<style>
.CodeMirror-merge-pane-rightmost{
    position: relative;
}
.in-coder-panel {
  flex-grow: 1;
  display: flex;
  position: relative;
}

.CodeMirror {
  flex-grow: 1;
  z-index: 1;
  text-align: left
}

.CodeMirror .CodeMirror-code {
  line-height: 19px;
}

.code-mode-select {
  position: absolute;
  z-index: 2;
  right: 10px;
  top: 10px;
  max-width: 130px;
}
</style>